<?php
@session_start();
if (empty($_SESSION['usuario'])) {
    ?>
    <!DOCTYPE html>
    <html lang="es">
        <head>
            <title> .:: ROMANO ::. </title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
            <link rel="stylesheet" type="text/css" href="css/principal.css"/>
            
            
            <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui.js"></script>
            <script type="text/javascript" src="js/jquery.keypad.js"></script>
            <script type="text/javascript" src="js/jquery.keypad-es.js"></script>
            <link href="css/dark-hive/jquery-ui-1.10.3.custom.css" rel="stylesheet">
            <link type="text/css" href="css/jquery.keypad.css" rel="stylesheet">
            
            <script type="text/javascript">
            
            $(function () {
                $('#nombreKeypad').keypad({useThemeRoller: true, 
                keypadOnly: false, layout: $.keypad.qwertyLayout, prompt: 'Teclado Táctil - Squalos'}); 

                $('#nombreKeypad').change(function() { 
                $('#themeUI').attr('href', 'themesDemo/' + $(this).val() + '/jquery-ui.css'); 
                });
                
        

            });

            $(function () {
                    $('#apellidoKeypad').keypad({useThemeRoller: true, 
                keypadOnly: false, layout: $.keypad.qwertyLayout, prompt: 'Favor de usar el teclado Táctil'}); 

                    $('#apellidoKeypad').change(function() { 
                $('#themeUI').attr('href', 'themesDemo/' + $(this).val() + '/jquery-ui.css'); 
                });

            });
            $(function () {
                    $('#numberKeypad').keypad();

                    $('#numberKeypad').change(function() { 
                $('#themeUI').attr('href', 'themesDemo/' + $(this).val() + '/jquery-ui.css'); 
                });

            });

            $(function () {
                    $('#passKeypad').keypad();

                    $('#passKeypad').change(function() { 
                $('#themeUI').attr('href', 'themesDemo/' + $(this).val() + '/jquery-ui.css'); 
                });


            });
            $(function () {
                    $(passKeypad).keypad({
                        backText: 'dsf'
                    });
                    
            });
            </script>
             </script>
    <script type="text/javascript" src="js/jquery.keypad-es.js"></script>        
            <style>
                .keypad-popup, .keypad-inline, .keypad-key, .keypad-special { font-size: 30px; }
                
                .keypad-popup { background-image: url('css/dark-hive/images/ui-bg_loop_25_000000_21x21.png'); }
                
                .keypad-key { background: #222222 url(css/dark-hive/images/ui-bg_highlight-soft_35_222222_1x100.png) 50% 50% repeat-x; 
                              border: 1px solid #444444;
                              font-weight: normal;
                              color: #eeeeee;
                }
                
                
                .keypad-close { background: linear-gradient(to bottom, #0EB705, #ccc); }
                
                .keypad-clear { background: linear-gradient(to bottom, #555555, #A19B9E); }
                
                .keypad-back { background: linear-gradient(to bottom, #EE0707, #ccc); }
            </style>
        </head>
        <body>
            <div class="principal">
                <div class="cabeceralogin">
                    <div class="menuTopLeft">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;
                        <img src="images/squ.jpg" width="200px" height="50px"></img>
                    </div>                    
                </div>
                <div class="bordeplateado">
                </div>
                <div class="capaPrincipallogin">

                    <br></br>

                    <form method="post" action="../Controller/C_Login.php">

                        <table align="center" border="1" style="border-radius: 1px; box-shadow: 5px 5px 5px #888888;">
                            <tr style="background-color: white;">
                                <td><img src="images/LOGIN.jpg" width="300px" height="370px"></td>
                                <td align="left">
                                    <fieldset class="login">
                                        <legend>Login</legend>

                                        <table border="0">                                                
                                            <tr>

                                                <td><label>USUARIO: </label><br>
                                                    <input type="text" class="usuario" name="loginUsuario" id="numberKeypad" style="width: 220px; height: 30px;">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>  <label>CLAVE: </label><br>

                                                    <input type="password" class="clave" name="passUsuario" id="passKeypad" style="width: 220px; height: 30px;">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" colspan="2">  <br>
                                                    <input type="submit" class="botonplateado" value="INGRESAR" style="width: 200px; height: 45px;">
                                                </td>
                                            </tr>
                                        </table>
                                    </fieldset>
                                    <br>
                                </td>
                            </tr>
                        </table>
                    </form>

                </div>
                <div class="pieplateado">
                    <label style="text-decoration: none; font-family: sans-serif;  color: white; ">Derechos Reservados: Data Software Group V1.0</label>
                </div>
            </div>
        </body>

    <?php
} else {
    ?>
    <script language="JavaScript" type="text/javascript">
        location.href='../View/Principal.php';
    </script>
    <?php
}
?>
</html>